<template>
    <div class="w_h_100 ">

      <div class="box">
        <div class="inlet">系统管理 > 字典管理 > <span class="size">数据字典</span></div>
        <myform :fields="fields" :model="values" class="m_t_10" :options="options">
          <template v-slot:button>
            <el-button @click="resetting">重置</el-button>
            <el-button type="primary" :icon="Search" @click="searchFor">搜索</el-button>
          </template>
        </myform>
      </div>
      <div class="mytable m_t_10 ">
        <div class="d_f j_c_s_b a_i_c">
          <h4>字典列表</h4>
          <el-button type="primary" :icon="Plus" @click="addDict" v-hasPerm="'addDictionaryChildren'">新增字典</el-button>
        </div>
        <mytable :fields="tableFields"  width="150" ref="tableRef" :values="values" api="dictDetailListByPage" class="m_t_10" :isSelection="false">
          <template v-slot:deleted="{row}">{{ row.deleted==0?'已启用':'已停用' }}</template>
          <template v-slot:operation="{ row }">
            <div class="d_f j_c_s_b">
              <span class="edit" @click="edit(row)" v-hasPerm="'editDictionaryChildren'">编辑</span>
              <span class="success" @click="modifyState(row.id,0,'是否启用当前字典?')" v-if="row.deleted==1" v-hasPerm="'statusDictionaryChildren'">启用</span>
              <span class="error" @click="modifyState(row.id,1,'是否停用当前字典?')" v-else v-hasPerm="'statusDictionaryChildren'">停用</span>
              <span class="error" @click="deleteOut(row.id)" v-hasPerm="'deleteDictionaryChildren'">删除</span>
            </div>
          </template>
        </mytable>
      </div>
      <el-drawer v-model="show" :title="title" size="500px" direction="rtl" :before-close="handleClose">
       <div class="child">
        <myform :fields="addFields" ref="ruleFrom" :options="options" :model="model" :inline="false" labelPosition="top" :rules="rules" class="m_t_16"></myform>
       </div>
        <div class="d_f j_c_c">
          <el-button type="primary" @click="save" v-myRepeat>保存</el-button>
          <el-button @click="handleClose">取消</el-button>
        </div>
      </el-drawer>
    </div>
  </template>
  <script lang='ts'>
  import { defineComponent, reactive, toRefs, onBeforeMount,ref} from 'vue'
  import { dictionaryChildType } from '../../../type/system'
  import { Search, Plus } from '@element-plus/icons-vue'
  import { copy,objectMatching } from '../../../utils/date'
  import { Message } from '../../../utils/resetMessage'
  import {dictDetailAdd,dictDetailUpdate,dictDetailDel,dictDetailStatus} from '../../../api/system/dictionary'
  import {ElMessageBox} from 'element-plus'
  import { useRouter,useRoute } from 'vue-router'
  const values = {
    name: '',
    deleted: '',
    parent:'',
  }
  const model={
    parent:'',
    name:'',
    value:'',
    sortBy:'',
    remark:'',
    id:0,
  }
  export default defineComponent({
    name: '',
    setup() {
      const data: dictionaryChildType = reactive({
        fields: [
          {
            label: "字典名称",
            prop: 'name',
            placeholder: '请输入',
            type: 'input',
            labelWidth:'70px'
          },
          {
            label: "字典状态",
            prop: 'deleted',
            placeholder: '请选择',
            type: 'select',
            bindLabel: 'name',
            bindValue: 'id',
          },
          {
            prop: 'button'
          }
        ],
        values: copy(values),
        model:copy(model),
        options: {
          deleted: [
            {
              name: '已启用',
              id: '0',
            },
            {
              name: '已停用',
              id: '1',
            },
          ],
          sortBy:[],
        },
        tableFields: [
          {
            label: '字典名称',
            prop: 'name',
          },
          {
            label: '字典值',
            prop: 'value',
          },
          {
            label: '状态',
            prop: 'deleted',
          },
          {
            label: '备注',
            prop: 'remark',
          },
          {
            label: '排序',
            prop: 'sortBy',
          },
          {
            label: '创建时间',
            prop: 'createdTime',
          },
  
        ],
        show: false,
        title: '新增字典',
        addFields: [
          {
            label: '字典名称',
            type: 'input',
            placeholder: '请输入',
            prop: 'name'
          },
          {
            label: '字典值',
            type: 'input',
            placeholder: '请输入',
            prop: 'value'
          },
          {
            label: '排序',
            type: 'select',
            placeholder: '请选择',
            prop: 'sortBy',
            bindLabel: 'name',
            bindValue: 'id',
          },
          {
            label: '备注',
            type: 'textarea',
            placeholder: '请输入',
            prop: 'remark',
            row: 5,
          },
        ],
        rules: {
          name: [
            { required: true, message: '请输入字典名称', trigger: 'blur' },
          ],
          value: [
            { required: true, message: '请输入字典值', trigger: 'blur' },
          ],
        },
        tableShow:false,
      })
      const router=useRouter()
      const ruleFrom = ref()
      const tableRef=ref()
      const route=useRoute()
      onBeforeMount(() => {
         data.values.parent=route.query.parent! as string
      })
    
      const methods = {
        //表格数据重置
        resetting() {
          data.values = copy(values)
          data.values.parent=route.query.parent! as string
          tableRef.value.resettingTable(data.values)
        },
        //列表根据筛选条件搜索
        searchFor() {
          tableRef.value.handleCurrentChange(1)
        },
        //关闭弹窗
        handleClose() {
          ElMessageBox.confirm(
            '当前信息将不再保存?',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          )
            .then(() => {
              ruleFrom.value.resetFields()//重置表单
                data.model=copy(model)//重置表单绑定数据
              data.show = false
            })
        },
        getsortBy(type:string){
          let sortBy=[]
         let length= tableRef.value.records.length
            for(let i =0;i<=length;i++){
             if(type=='add'){
              sortBy.push({
                name:String(i+1),
                id:String(i+1),
             })
             }
              else if(type=='edit'&&i<length){
                sortBy.push({
                name:String(i+1),
                id:String(i+1),
             })
             }
            }
            data.options.sortBy=sortBy
        },
        //添加字典并打开弹窗
        addDict() {
            methods.getsortBy('add')
          data.title = '新增字典'
          data.show = true
        },
        //添加字典跟修改字典保存按钮事件
        save(){
          ruleFrom.value.verification().then(()=>{
            data.model.parent=route.query.parent! as string
            if(!data.model.id){
                dictDetailAdd(data.model).then(()=>{
                Message({type:'success',message:'添加成功'})
                tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
                data.show=false//关闭弹窗
                ruleFrom.value.resetFields()//重置表单
                data.model=copy(model)//重置表单绑定数据
              })
            }else{
                dictDetailUpdate(data.model).then(()=>{
                Message({type:'success',message:'修改成功'})
                tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
                data.show=false//关闭弹窗
                ruleFrom.value.resetFields()//重置表单
                data.model=copy(model)//重置表单绑定数据
              })
            }
          })
        },
        deleteOut(id:number){
          ElMessageBox.confirm(
            '是否删除当前字典?',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error',
            }
          )
            .then(() => {
                dictDetailDel({id:id}).then(()=>{
                Message({type:'success',message:'删除成功'})
                tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
              })
            })
        },
        edit(row:any){
          methods.getsortBy('edit')
          data.title = '修改字典'
        data.model=objectMatching(row,data.model)
        data.show=true
        },
        //修改字典状态
        modifyState(id:number,status:number,val:string){
          ElMessageBox.confirm(
            val,
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          )
            .then(() => {
                dictDetailStatus({id:id,status:status}).then(()=>{
                Message({type:'success',message:'操作成功'})
                tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
              })
            })
        },
        //跳转到字典列表
        child(id:number){
        router.push({path:'/system/dictionary/child',query:{id:id}})
        },
      }
      return {
        ...toRefs(data),
        Search, Plus, ...methods,
        ruleFrom,tableRef
      }
    }
  })
  </script>
  <style scoped lang='scss'>
.box {
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  height: 70px;
  padding: 10px 32px;
  margin-top: 10px;
}

.mytable {
  overflow-y: auto;
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 10px 32px;
  height: calc(100% - 125px);
}
  </style>
  <style lang="scss">
  .child{
    height: calc(100% - 70px);
  overflow-y: auto;
    .el-input,.el-select{
       width:100% !important;
    }  
  }
  </style>